<template>
    <el-row :gutter='20' style='height: 580px;'>
        <el-col :span='4'>
            <el-row style='top : 125px; left: -35px'>
                <speed-simpl></speed-simpl>
            </el-row>
            <el-row style='top : 104px; left: 10px'>
                <compass-bar-l></compass-bar-l>
            </el-row>
            <el-row style='top : 263px; left: -35px'>
                <temperature-simpl></temperature-simpl>
            </el-row>
        </el-col>
        <el-col :span='16' style='height: 580px;'>
            <el-row type="flex" justify="center"  align="middle" style='height: 580px;'>
                <compass-board-round :yieldRate='yieldRate'></compass-board-round>
            </el-row>
            <el-row  type="flex" justify="center"  align="middle" >
                <compass-dir></compass-dir>
            </el-row>
        </el-col>
        <el-col :span='4'>
            <el-row style='top : 125px; left: 9px'>
                <sea-level-distance-simpl></sea-level-distance-simpl>
            </el-row>
            <el-row style='top : 104px; left: 10px'>
                <compass-bar-r></compass-bar-r>
            </el-row>
            <el-row style='top : 263px; left: 9px'>
                <sea-ground-distance-simpl></sea-ground-distance-simpl>
            </el-row>
        </el-col>
    </el-row>
</template>

<script>
import CompassBoardRound from '@/components/common/dashboards/gameMode/CompassBoardRound';
import CompassBarR from '@/components/common/dashboards/gameMode/CompassBarR';
import CompassBarL from '@/components/common/dashboards/gameMode/CompassBarL';
import SpeedSimpl from '@/components/common/status/SpeedSimpl';
import SeaLevelDistanceSimpl from '@/components/common/status/SeaLevelDistanceSimpl';
import SeaGroundDistanceSimpl from '@/components/common/status/SeaGroundDistanceSimpl';
import TemperatureSimpl from '@/components/common/status/TemperatureSimpl';
import CompassDir from '@/components/common/dashboards/gameMode/CompassDir';

export default {
    name: 'GamemodeCenter',
    props: {
    },
    data() {
        return {
            yieldRate : ""
        }
    },
    created () {
    },
    beforeDestroy() {
    },
    mounted() {
        setInterval(this.addData, 3000);
    },
    methods: {
        addData : function() {
            this.$axios.get(this.GLOBAL.serverIp + '/api/compassBoard/').then((res) => {
                this.yieldRate = "0"
                // this.yieldRate = (res.data.data * 1).toFixed(3)
            })
        },
    },
    components : {
        CompassBoardRound,
        CompassBarR,
        CompassBarL,
        SpeedSimpl,
        SeaLevelDistanceSimpl,
        SeaGroundDistanceSimpl,
        TemperatureSimpl,
        CompassDir
    }
};
</script>

<style scoped>
* {
    background: transparent;
    color: #C0911F;
    font-size: 10px;
}


</style>
